<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <!-- 定义一个容器 -->
    <div id="app">
        <!-- 获取变量
         -->
        你好：{{name}}

        <br>
        <!-- v-model vue的一个属性 双向数据绑定 text的值变化，其他name也能变化 -->
        <input type="text" v-model="name">
        <div v-text = 'name2'></div>
        <div v-html = 'name3'></div>
    </div>

    <script>
        // 创建Vue对象
        // vm是一个全局变量
        let vm = new Vue({
               el:"#app",
               data:{
                   name:"这是第一个vue.js程序",
                   name2:'name22222',
                   name3:'name333333',
                   

               }

        });
        // 修改名字
        vm.name = "heool word";


    </script>

    
    
</body>
</html>